<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/template.css">
    <link rel="stylesheet" href="../css/header-shoping.css">
    <link rel="stylesheet" href="../css/index.css">
    <script src="../lib/jquery.js"></script>
    <script src="../js/index.js"></script>
    <script>
        onload = function(){
            let selectBlocks = $('.banner .left-select div');
            $('.banner .left li').mouseover(function(){
                addRemoveClass($(this).index(),$('.banner .left li'),'select');
                addRemoveClass($(this).index(),selectBlocks,'select');
            })
            $('.banner .left li').mouseout(function(){
                RemoveClass($(this).index(),$('.banner .left li'),'select');
                RemoveClass($(this).index(),selectBlocks,'select')
            })
            selectBlocks.mouseover(function(){
                addClass($(this).index(),$('.banner .left li'),'select');
                addClass($(this).index(),selectBlocks,'select')
            })
            selectBlocks.mouseout(function(){
                RemoveClass($(this).index(),$('.banner .left li'),'select');
                RemoveClass($(this).index(),selectBlocks,'select')
            })
        }
    </script>
    <title>Document</title>
</head>
<body>
    <!-- 头部header开始 -->
    <div id="header" class="fsize-14 clearfix">
        <!-- header的top区域 -->
        <div class="top">
            <div class="warpper c-ffffff">
                <!-- logo -->
                <h1 class="logo fl">
                    <a href="#"><img src="../image/LOGO_02.jpg" alt=""></a>
                </h1>
                <!-- 网页提示,登录注册 -->
                <a class="fl c-ffffff" href="#">legochina.cn</a>
                <p class="fr">欢迎光临<a href="#">乐购</a>，请 <a href="#" class="c-ffffff">登录</a>\<a href="#">注册</a></p>
            </div>
        </div>
        <!-- header搜索区域 -->
        <div class="center warpper">
            <div class="center-top">
                <div class="btn fr">
                    <a href="#" class="c-ffffff">
                        <span class="spr shoping"></span>
                        <span>
                            购物车
                        </span>
                        <span class="number">3</span>
                    </a>
                    <a href="#" class="c-808080">我的订单</a>
                </div>
                <form action="#" class="source fr">
                    <input type="text" name="source-up" class="fl">
                    <input type="submit" class="spr source-img fl" value="">
                </form>
            </div>
            <ul class="nav fr">
                <li><a href="#">图书</a></li>
                <li><a href="#">电子书</a></li>
                <li><a href="#">原创文学</a></li>
                <li><a href="#">服装</a></li>
                <li><a href="#">运动户外</a></li>
                <li><a href="#">孕婴童</a></li>
                <li><a href="#">家居</a></li>
                <li><a href="#">创意文具</a></li>
                <li><a href="#">地方特产</a></li>
                <li><a href="#">海外购</a></li>
                <li><a href="#">电器城</a></li>
            </ul>
        </div>
    </div>
    <!-- 头部header结束 -->

    <!-- 海报banner开始 -->
    <div class="banner warpper clearfix">
        <ul class="left fl">
            <li><a href="#" >图书、电子书、童书</a></li>
            <li><a href="#">创意文具</a></li>
            <li><a href="#">服饰、内衣</a></li>
            <li><a href="#">鞋靴、箱包</a></li>
            <li><a href="#">运动户外</a></li>
            <li><a href="#">孕、婴、童</a></li>
            <li><a href="#">家居、家纺、汽车</a></li>
            <li><a href="#">家具、家装、康体</a></li>
            <li><a href="#">美妆、个人护理、成人</a></li>
            <li><a href="#">食品、茶酒、生鲜</a></li>
            <li><a href="#">腕表、珠宝、眼镜</a></li>
            <li><a href="#">手机、数码</a></li>
            <li><a href="#">电脑办公</a></li>
            <li><a href="#">家用电器</a></li>
        </ul>
        <div class="left-select">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
        <div class="banner-body fl">
            <ul>
                <li><a href="#"><img src="../image/商城素材/banner(1).jpg" alt=""></a></li>
                <li><a href="#"></a></li>
                <li><a href="#"></a></li>
                <li><a href="#"></a></li>
                <li><a href="#"></a></li>
                <li><a href="#"></a></li>
            </ul>
            <div class="btn">
                <a href="#">1</a>
                <a href="#">2</a>
                <a href="#">3</a>
                <a href="#">4</a>
                <a href="#">5</a>
                <a href="#">6</a>
            </div>
        </div>
    </div>
    <!-- 海报banner结束 -->
</body>
</html>